<template>
    <div style="text-align:center;">
        <div class="tipDiv">
            <div class = "tipCursor">鼠标点击这里
                <span class="tipText">提示文本</span>
            </div>
        </div>

        <div class="tipDiv2" style="margin-top: 100px">
            <div class = "tipCursor">鼠标点击这里
                <span class="tipText">提示文本</span>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "index.vue"
    }
</script>

<style>

    /*--------------------鼠标提示1------------------*/
    .tipDiv{
        text-align: center;
    }

    .tipDiv .tipCursor{
        display: inline-block;
        border-bottom: 1px dotted black;
    }

    .tipDiv .tipCursor .tipText {
        content: " ";
        display: none;
        min-width: 10px;
        padding: 12px 16px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        /* 定位 */
        position: absolute;
        z-index: 1;
        margin-left: 50px;
        background-color: black;
        color: white;
        border-radius: 15px;
        border-color: black transparent transparent transparent;
    }

    .tipDiv:hover .tipText{
        display: block;
    }

    /*--------------------鼠标提示2------------------*/
    .tipDiv2{
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }

    .tipDiv2 .tipText{
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -60px;
        /* 淡入 - 1秒内从 0% 到 100% 显示: */
        opacity: 0;
        transition: opacity 1s;
    }

    .tipDiv2 .tipCursor .tipText::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent;
    }

    .tipDiv2:hover .tipText{
        visibility: visible;
        opacity: 1;
    }
</style>